<template lang="html">
    <div class="view" v-loading="loading">
        <div class="screening">
            <datePicker startEndTime @onFilter="onFilter" />
            <span>统计时间：{{statisTime}}</span>
        </div>
        <div class="total_view">
            <div class="opt_total">
                <div class="title">
                  <span>总销售额</span>
                  <i class="el-icon-info" @click="navigateTo(1)"></i>
                </div>
                <div class="value">￥{{statsData.sumRealPrice}}</div>
                <div class="growth">日均销售额：{{statsData.avgSumRealPrice}}</div>
            </div>
            <div class="opt_total">
                <div class="title">
                  <span>销售数量</span>
                  <i class="el-icon-info" @click="navigateTo(2)"></i>
                </div>
                <div class="value">{{statsData.salaCount}}</div>
                <div class="growth">日均销售数量：{{statsData.avgSalaCount}}</div>
            </div>
            <div class="opt_total">
                <div class="title">
                  <span>支付笔数</span>
                  <i class="el-icon-info visibility"></i>
                </div>
                <div class="value">{{statsData.payCount}}</div>
                <div class="growth">日均增长：{{statsData.avgDayGrow}}</div>
            </div>
            <div class="opt_total">
                <div class="title">
                  <span>付款用户</span>
                  <i class="el-icon-info" @click="navigateTo(3)"></i>
                </div>
                <div class="value">{{statsData.payMemberCount}}</div>
                <div class="growth">今日增长：{{statsData.todayGrow}}</div>
            </div>
        </div>

        <div class="echarts_view_1">
            <div class="filter_view">
                <div class="tabs_view">
                    <el-tabs v-model="tabsType" @tab-click="handleTab">
                        <el-tab-pane label="销售额" name="1"></el-tab-pane>
                        <el-tab-pane label="销售数量" name="2"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="f_view">
                  <span>统计时间：{{statisTime1}}</span>&nbsp;&nbsp;&nbsp;
                  <datePicker startEndTime @onFilter="onFilter1" />

                </div>
            </div>

            <div class="content">
                <div class="e_chart" ref="echarts"></div>
                <div class="ranks">
                    <div class="rank_t">
                        <span>测量师销售业绩排行</span>
                        <div class="rank_face">
                          <img src="../../assets/img/down.png" />
                          <i class="el-icon-more" @click="navigateTo(4)"></i>
                        </div>
                    </div>

                    <div class="rank_list">

                        <div class="rank_item" v-for="(item,index) in rankData" :key="index">
                            <div class="name">
                                <div :class='[index<3?"number radius_num":"number"]'>{{index+1}}</div>
                                <span>{{item.realName}}</span>
                            </div>
                            <div class="price">￥{{item.sumRealPrice}}</div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="echarts_view_2">
            <div class="echarts_wrap">
                <div class="echarts_head">
                  <p>销售额类别占比</p>
                  <div class="screening">
                    <datePicker @onFilter="onFilter2" />
                    <span>统计时间：{{statisTime2}}</span>
                  </div>
                </div>
                <div class="e_chart" ref="echarts2"></div>
            </div>
            <div class="echarts_wrap">
                <div class="echarts_head">
                  <p>活动转化占比</p>
                  <div class="buttons">
                      <!-- <datePicker @onFilter="onFilter" /> -->
                  </div>
                </div>
                <div class="echarts_statistics">
                      <div class="echarts">
                          <div class="e_item">
                              <p>2980转化率</p>
                              <div class="e_out">
                                <div class="text">60.4%</div>
                                <div class="e_bar_wrap">
                                    <div class="bar"></div>
                                    <span>送出</span>
                                </div>
                              </div>
                              <div class="e_ord">
                                <div class="trend up">14.4%</div>
                                <div class="e_bar_wrap">
                                    <div class="bar">
                                      <div class="process"></div>
                                      <div class="scale">60.4%</div>
                                    </div>
                                    <span>订单</span>
                                </div>
                              </div>
                          </div>
                          <div class="e_item">
                              <p>运动文胸转化率</p>
                              <div class="e_out">
                                <div class="text">60.4%</div>
                                <div class="e_bar_wrap">
                                    <div class="bar"></div>
                                    <span>送出</span>
                                </div>
                              </div>
                              <div class="e_ord">
                                <div class="trend up">14.4%</div>
                                <div class="e_bar_wrap">
                                    <div class="bar">
                                      <div class="process"></div>
                                      <div class="scale">60.4%</div>
                                    </div>
                                    <span>订单</span>
                                </div>
                              </div>
                          </div>
                      </div>
                      <div class="tables">
                        <el-table :header-cell-style="{color:'#333',background:'#E8E8E8'}" border>
                          <el-table-column align="center" prop="commodityName" label="活动名称"></el-table-column>
                          <el-table-column align="center" prop="color" label="送出数量"></el-table-column>
                          <el-table-column align="center" prop="laceName" label="订单数量"></el-table-column>
                          <el-table-column align="center" prop="laceName" label="转化率"></el-table-column>
                          <el-table-column align="center" prop="laceName" label="收款占比"></el-table-column>
                        </el-table>
                      </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      tabsType: '1',
      statisTime: '',
      statisTime1: '',
      statisTime2: '',
      topDate: [],
      date:[],
      statsData: {},
      rankData: [],
      pieTotal: 0,
      realPriceGroup:[],
      orderCountGroup:[],
      echratsOptions: {
          visualMap: [{show: false,seriesIndex: 0, min: 0,max: 400}],
          title: {text:'销售额趋势', textStyle: {fontSize: 14}, left: "center"},
          color: ['#3398DB'],
          tooltip : {trigger: 'axis'},
          toolbox:{feature:{saveAsImage: {title:'下载'}},right:80},
          xAxis : [{data:[]}],
          yAxis : [{type : 'value'}],
          series : [
            {
              type:'line',
              barWidth: '40%',
              data:[]
          }]
      },
      echratsOptions2:{
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br>销售额 {c}'
        },
        toolbox:{feature:{saveAsImage: {title:'下载'}},right:30},
        legend: {
            orient: 'vertical',
            right: 50,
            top: 50,
            data: []
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['30%', '60%'],
                label: {
                  normal: {show:false}
                },
                data: []
            }
        ]
      },
      year: '',
      month: '',
      day: '',
      year1: '',
      month1: '',
      day1: '',
      year2: '',
      month2: '',
      day2: '',



    }
  },
  created(){
      this.getAllData();
  },
  methods:{
    async getAllData(){
      this.loading = true;
      await this.selectDataStats();
      await this.selectDataStatsColumnar();
      await this.selectDataStatsPie();
      this.initEcharts();
      this.loading = false;
    },
    async selectDataStats(){
      await this.$http.selectDataStats({
        startTime: (this.topDate&&this.topDate[0]) || '',
        endTime: (this.topDate&&this.topDate[1]) || '',
        dayTime: this.day,
        monthTime: this.month,
        yearTime: this.year,
      }).then(res=>{
        if(res.data.code == 0){
          this.statsData = res.data.data;
        }
      });
    },
    async selectDataStatsColumnar(){
      await this.$http.selectDataStatsColumnar({
          startTime: (this.date&&this.date[0]) || '',
          endTime: (this.date&&this.date[1]) || '',
          dayTime: this.day1,
          monthTime: this.month1,
          yearTime: this.year1,
      }).then(res=>{
        if(res.data.code == 0){
          this.realPriceGroup = res.data.data.realPriceGroup;
          this.orderCountGroup = res.data.data.orderCountGroup;
          this.handleTab();
          this.rankData = res.data.data.designerRank;
        }
      });
    },
    async selectDataStatsPie(){
      await this.$http.selectDataStatsPie({
        dayTime: this.day2,
        monthTime: this.month2,
        yearTime: this.year2,
      }).then(res=>{
        if(res.data.code == 0){
          var data = res.data.data;
          this.echratsOptions2.legend.data = [];
          this.echratsOptions2.series[0].data = [];
          if(data && data.length > 0){
            data.forEach(item=>{
              var name = `${item.typeName} | ${item.realPriceRatio}%     ￥${item.sumRealPrice}`;
              this.echratsOptions2.legend.data.push(name);
              this.echratsOptions2.series[0].data.push({value: item.sumRealPrice,name});
            })
          }
          this.initEcharts();
        }
      })
    },
    onFilter(e){
      this.statisTime = e.val;
      this.topDate = [];
      this.year = '';
      this.month = '';
      this.day = '';
      switch (e.key) {
        case 1: this.day = e.val; break;
        case 2: this.month = e.val; break;
        case 3: this.year = e.val; break;
        case 4:
          this.topDate = [...e.val];
          if(e.val[0]) this.statisTime = `${e.val[0]} - ${e.val[1]}`;
          else this.statisTime = '';
        break;
      }
      this.selectDataStats()
    },
    onFilter1(e){
      this.statisTime1 = e.val;
      this.date = [];
      this.year1 = '';
      this.month1 = '';
      this.day1 = '';
      switch (e.key) {
        case 1: this.day1 = e.val; break;
        case 2: this.month1 = e.val; break;
        case 3: this.year1 = e.val; break;
        case 4:
          this.date = [...e.val];
          if(e.val[0]) this.statisTime1 = `${e.val[0]} - ${e.val[1]}`;
          else this.statisTime1 = '';
        break;
      }
      this.selectDataStatsColumnar();
    },
    onFilter2(e){
      this.statisTime2 = e.val;
      this.year2 = '';
      this.month2 = '';
      this.day2 = '';
      switch (e.key) {
        case 1: this.day2 = e.val; break;
        case 2: this.month2 = e.val; break;
        case 3: this.year2 = e.val; break;
      }
      this.selectDataStatsPie();
    },

    filter2(n){
      if(this.active2 == n) return false;
      if(n){
        this.active2 = n;
      }else{
        this.active2 = 0;
      }
    },
    handleTab(){
      this.echratsOptions.xAxis[0].data = [];
      this.echratsOptions.series[0].data = [];
      if(this.tabsType == 1){
        this.echratsOptions.title.text = '销售额趋势';
        if(this.realPriceGroup && this.realPriceGroup.length>0){
          this.realPriceGroup.forEach(item=>{
            this.echratsOptions.xAxis[0].data = [...this.echratsOptions.xAxis[0].data,item.createTime];
            this.echratsOptions.series[0].data = [...this.echratsOptions.series[0].data,item.sumRealPrice];
          })
        }
      }else{
        this.echratsOptions.title.text = '销售数量趋势';
        if(this.orderCountGroup && this.orderCountGroup.length>0){
          this.orderCountGroup.forEach(item=>{
            this.echratsOptions.xAxis[0].data = [...this.echratsOptions.xAxis[0].data,item.createTime];
            this.echratsOptions.series[0].data = [...this.echratsOptions.series[0].data,item.count];
          })
        }
      }
      this.initEcharts();
    },
    initEcharts(){
      var echarts = this.$chart.init(this.$refs['echarts']);
      var echarts2 = this.$chart.init(this.$refs['echarts2']);
      echarts.clear();
      echarts2.clear();
      echarts.setOption(this.echratsOptions,true);
      echarts2.setOption(this.echratsOptions2,true);
    },


    navigateTo(n){
      switch (n) {
        case 1:
          this.$router.push({path: '/statistics/sales_statistics/sales_limit', query: {}});
          break;
        case 2:
          this.$router.push({path: '/statistics/sales_statistics/sales_num', query: {}});
          break;
        case 3:
          this.$router.push({path: '/statistics/sales_statistics/sales_user', query: {}});
          break;
        case 4:
          this.$router.push({path: '/statistics/sales_statistics/designer', query: {}});
          break;

      }
    },

  }
}
</script>

<style lang="css" scoped>
.active{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
.total_view{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.total_view .opt_total{
    width: 24%;
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
}
.opt_total .title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  padding: 12px;
}
.opt_total .title span{
  color: #333;
  font-size: 16px;
}
.opt_total .title .visibility{
  visibility: hidden;
}
.opt_total .title i{
  cursor: pointer;
  font-size: 18px;
  color: #D8D8D8;
}
.opt_total .title i:hover{
  color: #3F97FF;
}
.opt_total .value{
  font-size: 36px;
  color: #333;
  line-height: 80px;
  padding: 0 12px;
}
.opt_total .growth{
  border-top: 1px solid #E8E8E8;
  padding: 12px;
  font-size: 14px;
  color: #333;
}
.echarts_view_1{
  padding: 12px;
  background: #fff;
  margin-bottom: 24px;
}
.echarts_view_1 .filter_view{
  position: relative;

}
.echarts_view_1 .f_view{
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.f_view span{
  font-size: 14px;
  color: #656565
}
.echarts_view_1 .buttons{
  margin-left: 20px;
}
.echarts_view_1 .content{
  display:flex;
  justify-content: space-between;
  width: 100%;
}
.echarts_view_1 .content .e_chart{
  width: 70%;
  height: 400px;
  padding-top: 30px;
}
.echarts_view_1 .content .ranks{
  width: 28%;
  padding-right: 20px;
  max-width: 350px;
}
.ranks .rank_t{
  display: flex;
  font-size: 14px;
  color: #333;
  justify-content: space-between;
  padding: 12px 0;
}
.rank_face img{
  margin-right: 10px;
  cursor: pointer;
}
.rank_face i {
  cursor: pointer;
}
.rank_face i:hover{
  color: #4196FF
}
.rank_list{
  width: 100%;
}
.rank_item{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.rank_item .name{
  width: 38%;
  display: flex;
  justify-content: space-between;
}
.rank_item .number{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  color: #333;
  background: #fff;
  text-align: center;
  line-height: 20px;
}
.rank_item .radius_num{
  background: #4196FF;
  color: #fff;
}
.rank_item span{
  font-size: 16px;
  color: #333;
}
.rank_item .price{
  color: #4196FF;
  font-size: 16px;
}
.echarts_view_2{
  display: flex;
  justify-content: space-between;
}
.echarts_view_2 .echarts_wrap{
  width: 49%;
  background: #fff;
  border-radius: 3px;
}
.echarts_wrap .echarts_head{
  padding: 20px;
  border-bottom: 1px solid #E8E8E8;
}
.echarts_head p{
  height: 30px;
}
.echarts_wrap .e_chart{
  padding: 20px;
  box-sizing: border-box;
  height: 400px;
}
.echarts_statistics{
  padding: 20px;
}
.echarts_statistics .echarts{
  display: flex;
  padding-top: 40px;
  margin-bottom: 20px;
}
.echarts .e_item{
  display: flex;
  flex-wrap: wrap;
  padding-left: 40px;
}
.echarts .e_item p{
  color: #999;
  font-size: 14px;
  width: 100%;
  margin-bottom: 20px;
}
.e_item .e_out{
  margin-right: 40px;
}
.e_item .text{
  font-size: 18px;
  color: #333;
}
.e_item .trend{
  font-size: 14px;
  color: #333;
  line-height: 20px;
  position: relative;
}
.e_item .up:after{
  content:'';
  position: absolute;
  right: -20px;
  top: 2px;
  width: 0;
  height: 0;
  border-left:8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #4196FF;
}
.e_item .down:after{
  content:'';
  position: absolute;
  right: -30px;
  top: 2px;
  width: 0;
  height: 0;
  border-left:8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #4196FF;
}
.e_item .e_bar_wrap{
  padding-left: 30px;
  padding-top: 30px;
}
.e_item .e_bar_wrap .bar{
  width: 24px;
  height: 80px;
  background: #4196FF;
  position: relative;
}
.e_item .e_bar_wrap .bar .scale{
  width: 36px;
  height: 24px;
  background: #FF9900;
  line-height: 24px;
  padding-left: 2px;
  position: absolute;
  left: -66px;
  top: 0;
  margin-top: -12px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.e_item .e_bar_wrap .bar .scale:after{
  content: '';
  position:absolute;
  right: -12px;
  width: 0;
  height: 0;
  border-top:12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #FF9900;
}
.e_item .e_bar_wrap .bar .process{
  position: absolute;
  width: 100%;
  height: 0%;
  left: 0;
  bottom:0;
  background: #4196FF;
}
.e_item .e_ord .bar{
  background: #B4D6FF;
}
.e_item .e_bar_wrap span{
  font-size: 12px;
  color: #333;
  line-height: 30px;
}
.e_item .e_ord{
  padding-left: 50px;
  position: relative;
}
.e_item .e_ord .e_bar_wrap{
  padding-left: 0;
}
.screening{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
}
.screening span{
  font-size: 14px;
  color: #656565
}




</style>
